<template>
  <div class="exam-analytics">
    <h2>考试数据分析</h2>
    <div class="filters mb-2">
      <select v-model="selectedExam" @change="loadExamData">
        <option value="">选择考试</option>
        <option v-for="exam in exams" :key="exam.id" :value="exam.id">{{ exam.name }}</option>
      </select>
    </div>
    <div v-if="selectedExam" class="grid grid-2">
      <div class="card">
        <h3>成绩分布</h3>
        <canvas ref="scoreDistributionChart"></canvas>
      </div>
      <div class="card">
        <h3>题目正确率</h3>
        <canvas ref="questionAccuracyChart"></canvas>
      </div>
      <div class="card">
        <h3>考试时长分布</h3>
        <canvas ref="examDurationChart"></canvas>
      </div>
      <div class="card">
        <h3>难度分析</h3>
        <canvas ref="difficultyAnalysisChart"></canvas>
      </div>
    </div>
    <div v-else class="no-data">
      请选择一个考试来查看分析数据
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Chart from 'chart.js/auto';
import { api } from '../api/mockApi';

const exams = ref([]);
const selectedExam = ref('');

const scoreDistributionChart = ref(null);
const questionAccuracyChart = ref(null);
const examDurationChart = ref(null);
const difficultyAnalysisChart = ref(null);

onMounted(async () => {
  exams.value = await api.getExams();
});

const loadExamData = async () => {
  if (!selectedExam.value) return;

  const examData = await api.getExamAnalytics(selectedExam.value);

  createScoreDistributionChart(examData.scoreDistribution);
  createQuestionAccuracyChart(examData.questionAccuracy);
  createExamDurationChart(examData.examDuration);
  createDifficultyAnalysisChart(examData.difficultyAnalysis);
};

const createScoreDistributionChart = (data) => {
  new Chart(scoreDistributionChart.value, {
    type: 'bar',
    data: {
      labels: ['0-60', '61-70', '71-80', '81-90', '91-100'],
      datasets: [{
        label: '学生人数',
        data: data,
        backgroundColor: 'rgba(75, 192, 192, 0.6)',
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
};

const createQuestionAccuracyChart = (data) => {
  new Chart(questionAccuracyChart.value, {
    type: 'horizontalBar',
    data: {
      labels: data.map(item => item.question),
      datasets: [{
        label: '正确率',
        data: data.map(item => item.accuracy),
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          beginAtZero: true,
          max: 100
        }
      }
    }
  });
};

const createExamDurationChart = (data) => {
  new Chart(examDurationChart.value, {
    type: 'pie',
    data: {
      labels: ['<30分钟', '30-60分钟', '60-90分钟', '90-120分钟', '>120分钟'],
      datasets: [{
        data: data,
        backgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#4BC0C0',
          '#9966FF'
        ],
      }]
    },
    options: {
      responsive: true,
    }
  });
};

const createDifficultyAnalysisChart = (data) => {
  new Chart(difficultyAnalysisChart.value, {
    type: 'radar',
    data: {
      labels: ['简单', '中等', '困难'],
      datasets: [{
        label: '平均得分率',
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
      }]
    },
    options: {
      responsive: true,
      scales: {
        r: {
          beginAtZero: true,
          max: 100
        }
      }
    }
  });
};
</script>

<style scoped>
.exam-analytics {
  padding: 1rem;
}

.filters {
  margin-bottom: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

.no-data {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}
</style>

